// 1.1 获取裁剪区域的 DOM 元素[原图]
var $image = $('#image')

// 1.2 配置选项
const options = {
	// 纵横比 [原图上面的剪裁框] 1:1是正方形
	aspectRatio: 1,
	// 指定预览区域div [头像]
	preview: '.img-preview'
}

// 1.3 创建裁剪区域
$image.cropper(options);

//选择图片裁剪
$('#mybtn').on('click', function() {
	$('#myfile').trigger('click');
})
$('#myfile').on('change', function() {
	let myFile = this.files[0];
	let myUrl = URL.createObjectURL(myFile);
	$image.cropper('destroy').attr('src', myUrl).cropper(options);
})

$("#mybtn2").on('click', function() {
	//转换base64格式图片
	var canvasObj = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
		width: 100,
		height: 100
	})
	var base64 = canvasObj.toDataURL('image/png') // 将 Canvas 画布上的内容，转化为 base64 格式的字符串

	//ajax上传
	$.ajax({
		type: 'post',
		url: '/my/update/avatar',
		data: {
			avatar: base64
		},
		success: function(ress) {
			layer.msg(ress.message);
			if (ress.status === 0) {
				// 重新渲染父页面的头像
        window.parent.itisme();
			}

		}
	})

})
